<template>
	<el-card shadow="hover" v-loading="isLoading">
		<h2>订单基本信息</h2>
		<el-divider />
		<el-main>
			<el-row>
				<el-col :span="3">
					<el-form-item label="订单编号：" prop="order_sn">
						<el-text class="mx-1" clearable>{{ info.order_sn }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="4" :offset="1">
					<el-form-item label="下单时间：" prop="status_name">
						<el-text class="mx-1" clearable>{{ info.created_at }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="3" :offset="1">
					<el-form-item label="单位名称：" prop="user_mobile">
						<el-text class="mx-1" clearable>{{ info.company_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="3" :offset="1">
					<el-form-item label="用户姓名：" prop="company_name">
						<el-text class="mx-1" clearable>{{ info.username }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="3" :offset="1">
					<el-form-item label="用户账号：" prop="company_name">
						<el-text class="mx-1" clearable>{{ info.mobile }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
		</el-main>
	</el-card>
	<el-card shadow="hover" v-loading="isLoading">
		<h2>商品信息</h2>
		<el-divider />
		<el-main>
			<el-row>
				<el-table :data="order_product" style="width: 100%">
					<el-table-column prop="product_name" label="商品名称" />
					<el-table-column prop="sale_info" label="销售价" />
					<el-table-column prop="active_status_name" label="激活状态" />
					<el-table-column prop="wait_day" label="服务等待期(天)" />
					<el-table-column prop="service_start_at" label="权益生效时间" />
					<el-table-column prop="provider_name" label="服务商" />
					<el-table-column prop="service_status_name" label="服务开通状态" />
					<el-table-column prop="valid_time" label="有效期" />
				</el-table>
			</el-row>
			<el-main style="float: right;margin-right: 8%;font-size: 12px">
				<el-row style="line-height: 23px;">
					<div>订单金额：￥{{ info.order_amount }}</div>
				</el-row>
				<el-row style="line-height: 23px;">
					<div>优惠金额：￥{{ info.discount_amount }}</div>
				</el-row>
				<el-row style="line-height: 23px;">
					<div>实付金额：￥{{ info.paid_amount }}</div>
				</el-row>
			</el-main>
		</el-main>
	</el-card>
</template>

<script>
export default {
	name: 'serviceOrderDetail',
	components: {},
	data() {
		return {
			action: null,
			isLoading: false,
			order_sn: null,
			info: [],
			order_product: [],
		}
	},
	created() {

	},
	mounted() {
		this.order_sn = this.$route.query.order_sn;
		console.log('order_sn' + this.order_sn);
		if (this.order_sn) {
			this.loadForm()
		}
	},
	methods: {
		//表单数据加载
		loadForm() {
			this.isLoading = true;
			let params = {
				order_sn: this.order_sn,
			}
			this.$API['service_order.service_order'].info.post(params).then((res) => {
				if (res.code == 0) {
					this.info = res.data;
					this.order_product = res.data.order_product;
					console.log(res.data)
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", { type: 'error' })
			})
			this.isLoading = false;
		},
	}
}
</script>

<style>
.avatar {
	width: 148px;
	height: 148px;
	display: block;
}

.el-form-item--default .el-form-item__label {
	text-align: left;
}

.el-form-item--default .el-form-item__label {
	justify-content: start;
}

.el-card {
	margin: 10px;
}
</style>
